<!--  -->
<template>
  <div class="ranking_content">
    <div class="ranking_item" v-for="(item, key) in list" :key="key" @click="gotoGroupCodeLabel(item)">
      <div class="ranking_wrapper flex">
        <div class="gold_medal">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/group-code/1@2x.png" v-if="(key + 1) === 2" />
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/group-code/2@2x.png" v-if="(key + 1) === 1" />
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/group-code/3@2x.png" v-if="(key + 1) === 3" />
          <!-- <i class="iconfont icon-qhm_listbg"></i>
          <span class="num">{{ key + 1 }}</span> -->
        </div>
        <div class="ranking-img">
          <img v-if="item.member_id != 0" class="ranking_face" :src="item.has_one_member ? item.has_one_member.avatar_image : ''" />
          <img v-else :src="shop_log" class="ranking_face" />
        </div>
        <h3 class="ell">{{ item.code_name }}</h3>
        <div class="flex-j-c">
          <div class="ranking-btn">加入</div>
        </div>
      </div>
      <!-- <i class="iconfont icon-jiahao ranking_item_addCode"></i> -->
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  name:'',
  //import引入的组件需要注入到对象中才能使用
  props:{
    list:{
      type:Array,
      default:() => {
        return []
      }
    },
    shop_log:String
  },
  components: {},
  data() {
  return {

  };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    gotoGroupCodeLabel(item) {
      this.$router.push(
        this.fun.getUrl("groupCodeLabel", {}, { groupCodeId: item.id })
      );
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
.ell {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ranking_content {
    display: grid;
    align-items: flex-end;
    justify-items: flex-end;
    grid-template-columns: repeat(3, 6.875rem);
    grid-column-gap: 0.5625rem;
    padding:0.6875rem 0.75rem 0.9375rem 0.75rem;

    .ranking_item {
      position: relative;
      border-radius: 0.625rem;
      height: 10.625rem;

      .ranking_wrapper {
        position: relative;
        flex-direction: column;
        justify-content: space-between;
        width: 6.875rem;
        box-sizing: border-box;
        padding:0 0 12px 0;
        height: 10.625rem;
        cursor: pointer;
        box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.05);
        border-radius: 0.469rem;
        
        .gold_medal {
          position: absolute;
          top: -0.05rem;
          left: 0.625rem;
          img {
            width:1.25rem;
            height: 1.5625rem;
           
          }
        }
        .ranking-img {
          padding:1.5rem 0 0 0;
          
        }
        .ranking_face {
          
          width: 3.75rem;
          height: 3.75rem;
          border-radius: 50%;
          display: block;
          &:nth-child(1) {
            border:0.125rem solid #EFEFEF;
            border-radius: 50%;
            box-shadow: 0rem 0.3125rem 0.4375rem 0.0625rem rgba(122,122,122,0.16);
          }
          &:nth-child(2) {
            border:0.125rem solid #EFEFEF;
            border-radius: 50%;
            box-shadow: 0rem 0.375rem 0.75rem 0.0625rem rgba(254,241,236,1);
          }
          &:nth-child(3) {
            border:0.125rem solid #EFEFEF;
            border-radius: 50%;
            box-shadow: 0rem 0.3125rem 0.4375rem 0.0625rem rgba(255,241,238,1);
          } 
        }
        h3 {
          // padding:0.9375rem 0 0.6875rem 0;
          text-align: center;
          font-weight: bold;
          color: #000000;
          padding:0 5px;
        }
        .ranking-btn {
          font-size: 0.8125rem;
          line-height: 0.8125rem;
          color: #FFFFFF;
          padding:0.4375rem 0.8125rem;
          background: var(--themeBaseColor);
          border-radius: 1.875rem 1.875rem 1.875rem 1.875rem;
        }
      }
      &:nth-child(1) {
        background: linear-gradient(140deg, #ECECF2 0%,#ECECF2 20%,#FFFFFF 48%, #FFFFFF 100%);
      }
      &:nth-child(2) {
        background: linear-gradient(140deg, #FEE8DF 0%,#FEE8DF 20%,#FFFFFF 48%, #FFFFFF 100%);
        height: 11.875rem;
        .ranking_wrapper {
          height: 11.875rem;
        }
      }
      &:nth-child(3) {
        background: linear-gradient(140deg, #FFE9E9  0%,#FFE9E9  20%,#FFFFFF 48%, #FFFFFF 100%);
      }

      .ranking_item_addCode {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%) translateY(50%);
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        background-color: var(--themeBaseColor);
      }
    }
}
</style>